<script lang="ts" setup>
import type { FormInst } from 'naive-ui';
import { NSpace, useMessage } from 'naive-ui';
import { ref } from 'vue';
import type { Fn } from '@vueuse/core';
import * as validator from '@/utils/validator';
import { enumToOption } from '@/utils/enum';
import { UserStatus } from '@/enum/carbon';
import { isSuccess } from '@/utils/response';
import RoleSelect from '@/views/system/role/modules/role-select.vue';
import organizationSelect from '@/views/system/organization/modules/organization-select.vue';
import * as service from './api';

const props = defineProps<{
  id: Fn;
  callback: Fn;
}>();

const message = useMessage();
const formInstRef = ref<FormInst | null>(null);
const dataForm = ref<any>({});
const showModal = ref(false);
const loading = ref<boolean>(false);
const statusOptions = enumToOption(UserStatus);

const rules = {
  username: {
    required: true,
    validator: validator.username
  },
  password: {
    required: false,
    validator: validator.password
  },
  roleId: {
    required: false
  }
};

async function open() {
  loading.value = true;
  try {
    const response = await service.detail({ id: props.id() });
    if (isSuccess(response)) {
      const staff = response.data;
      staff.roleId = staff.roles[0];
      staff.password = null;
      dataForm.value = staff;
    }
  } finally {
    loading.value = false;
  }
  showModal.value = true;
}

function close() {
  dataForm.value = {};
  showModal.value = false;
}

async function submit() {
  formInstRef.value?.validate((errors: any) => {
    if (!errors) {
      service.update(dataForm.value).then(response => {
        if (isSuccess(response)) {
          message.info('更新成功');
          close();
          if (props.callback) {
            props.callback();
          }
        }
      });
    }
  });
}
</script>

<template>
  <NButton type="info" @click="open()">编辑</NButton>
  <n-modal v-model:show="showModal">
    <NSpace vertical>
      <n-spin v-if="loading" size="small" />
      <n-card v-else title="编辑" class="card">
        <n-form ref="formInstRef" :label-width="80" :model="dataForm" :rules="rules" label-placement="left">
          <n-form-item label="用户名:" path="username">
            <n-input v-model:value="dataForm.username" type="text" disabled></n-input>
          </n-form-item>
          <n-form-item label="密码:" path="password">
            <n-input v-model:value="dataForm.password" type="password"></n-input>
          </n-form-item>
          <n-form-item label="角色:" path="roleId">
            <RoleSelect v-model:value="dataForm.roleId" />
          </n-form-item>
          <n-form-item label="组织:" path="organizationId">
            <organization-select v-model:value="dataForm.organizationId"></organization-select>
          </n-form-item>
          <n-form-item label="状态:" path="status">
            <n-select v-model:value="dataForm.status" :options="statusOptions" />
          </n-form-item>
          <n-flex justify="end">
            <n-button @click="close()">取消</n-button>
            <n-button type="primary" @click="submit()">确定</n-button>
          </n-flex>
        </n-form>
      </n-card>
    </NSpace>
  </n-modal>
</template>

<style scoped>
.card {
  width: 350px;
}
</style>
